<template>
	<view class="userCouponContainer">
		<view class="cards">
			<view class="cardsTab">
				<view 
					v-for="(item,index) in tabs" 
					:key="index" 
					:class="item.key === active ?'active':'tabItem'"
					@click="changeTab(item.key)"
				>{{item.title}}</view>
			</view>
		</view>
		<view class="lists">
			<view v-for="(item,index) in list" :key="index" class="listItems" v-if="list.length>0">
				<image style="width: 30px;" src="@/static/youhuiquan.png" mode="widthFix"></image>
				<view>
					<view class="title">{{item.couponName}}</view>
					<view class="desc">有效期至：{{item.expire_at}}</view>
					<view class="desc">{{item.info.cate_limit ===1 ?'全类目':item.available}}可用</view>
				</view>
			</view>
			<view v-else class="kong">
				暂无优惠券~
			</view>
		</view>
	</view>
</template>

<script>
	import { userCoupon } from '@/api/home.js'
	export default{
		data() {
			return {
				active: 1,
				page: 1,
				pageSize: 100,
				list:[],
				tabs: [
					{title:'已领取',key:1},
					{title:'已使用',key:2},
					{title:'已过期',key:3},
				]
			}
		},
		onShow() {
			this.getCoupon()
		},
		methods:{
			getCoupon(){
				userCoupon({queryType:this.active,page:this.page,pageSize:this.pageSize}).then(res=>{
					
					res.data.items.map(item=>{
						item.couponName = item.info.name
						let newData = []
						item.info.cates.map(demo=>{
							newData.push(demo.category.name)
						})
						console.log(newData,'newData')
						item.available = newData.join(',')
					})
					console.log(res,'res')
					this.list = res.data.items
				})
			},
			changeTab(key) {
				this.active = key
				this.getCoupon()
			}
		}
	}
</script>

<style scoped lang="less">
	.userCouponContainer{
		height: calc(100vh - 10px);
		padding: 10px;
		box-sizing: border-box;
		.lists{
			font-size: 14px;
			background: #fff;
			padding: 10px;
			min-height: 94%;
			box-sizing: border-box;
			.kong{
				text-align: center;
				margin: 15px;
				color: #989898;
				font-size: 12px;
			}
			.listItems{
				display: flex;
				align-items: center;
				border: 1px solid #f5f5f5;
				border-radius: 4px;
				padding: 10px;
				margin-bottom: 10px;
				image{
					margin-right: 15px;
				}
				.title{
					font-size: 14px;
					// font-weight: bold;
				}
				.desc{
					color: #989898;
					margin-top: 4px;
					font-size: 12px;
				}
			}
		}
		.cards{
			background-color: #fff;
			border-radius: 4px;
			padding: 10px;
			.cardsTab{
				display: flex;
				justify-content: space-around;
				font-size: 14px;
				.tabItem{
					padding-bottom: 6px;
				}
				.active{
					color: #2c6cf4;
					position:relative;
					padding-bottom: 6px;
					&::after{
						position: absolute;
						content: '';
						height: 2px;
						width: 30px;
						background-color: #2c6cf4;
						bottom: 0;
						left: 0;
						right: 0;
						margin: auto;
					}
				}
			}
		}
	}

</style>